<template>
	<view class="container">
		<top-back-navbar position="fixed" title="我的社区" background="#001b4d" color="#ffffff"></top-back-navbar>
		<view class="content">
			<view class="num_box">
				<view class="num_box-left"> 
					<view class="num_box-leftitem">ID号：{{resObj.my_id || 0}}</view>
					<view class="num_box-leftitem" style="margin-top: 30rpx;">级别：{{resObj.levelname}}</view>
				</view>
				<view class="num_box-right">
					<view class="num_box-right-num">¥{{resObj.self_performance || 0}}</view>
					<view class="num_box-right-text">自身业绩</view>
				</view>
			</view>
			<view class="jy-yj">
				<view class="jy-yj-title">业绩&交易</view> 
				<view class="jy-yj-list">
					<view class="jy-yj-item">
						<view class="list-title">社区总业绩</view>
						<view class="list-num">¥{{resObj.all_yj || 0}}</view>
					</view>
					<view class="jy-yj-item border-left padding-left">
						<view class="list-title">分享消费人数</view>
						<view class="list-num">{{resObj.tree_performance || 0}}</view>
					</view>
				</view>
				<view class="jy-yj-list border-top">
					<view class="jy-yj-item">
						<view class="list-title">社区当日业绩</view>
						<view class="list-num">¥{{resObj.all_tody_yeji || 0}}</view>
					</view>
					<view class="jy-yj-item border-left padding-left">
						<view class="list-title">分享总人数</view>
						<view class="list-num">{{resObj.daily_team_perf || 0}}</view>
					</view>
				</view>
			</view>
			<view class="sale-group"> 
				<view class="sale-title">销售团队</view> 
				<view v-for="(item, index) in user_list" :key="index">
					<view class="sale-list">
						<view class="sale-ids">
							<view class="sale-ids-left">
								<view class="sale-ids-index">{{item.id}}</view>
								<view class="sale-ids-btn">社区ID</view>
								<view class="sale-ids-id">{{item.mobile}}</view>
							</view>
							<view class="sale-ids-switch">
								<min-switch :value="item.can_sell_child == 1?true:false" active-color="#32539b" inactive-color="#a9a7b7" @change="switchChange(item, index)"></min-switch>
							</view>
						</view>
						<view class="sale-peron">
							<view class="sale-peron-item">无效会员：{{(item.ll_ds-item.vld_ds) || 0}}人</view>
							<view class="sale-peron-item">有效会员：{{item.vld_ds}}人</view>
						</view>
						<view class="sale-yj">
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{item.team_performance}}</view>
								<view class="sale-yj-item-text">总业绩</view>
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{item.daily_self_perf}}</view>
								<view class="sale-yj-item-text">当日业绩</view>
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-money"></view>
								<view class="sale-yj-item-text" :class="[item.have_order == 1?'sale-ids-switch-active':'sale-ids-switch-inactive']">{{item.have_order == 1?'本人已下单':'本人未下单'}}</view>
							</view>
						</view>
						</block>
					</view>
					<view class="sale-list sale-list-jt" v-for="(val,key) in item.childer" :key="index+'-'+key">
						<view class="sale-ids">
							<view class="sale-ids-left">
								<view class="sale-ids-index">{{val.id}}</view>
								<view class="sale-ids-btn">社区ID</view>
								<view class="sale-ids-id">{{val.mobile}}</view>
							</view>
							<view class="sale-ids-switch"></view>
						</view>
						<view class="sale-peron">
							<view class="sale-peron-item">无效会员：{{(val.ll_ds-val.vld_ds) || 0}}人</view>
							<view class="sale-peron-item">有效会员：{{val.vld_ds}}人</view>
						</view>
						<view class="sale-yj">
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{val.team_performance}}</view>
								<view class="sale-yj-item-text">总业绩</view>
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-money">¥{{val.daily_self_perf}}</view>
								<view class="sale-yj-item-text">当日业绩</view>
							</view>
							<view class="sale-yj-item">
								<view class="sale-yj-item-money"></view>
								<view class="sale-yj-item-text" :class="[val.have_order == 1?'sale-ids-switch-active':'sale-ids-switch-inactive']">{{val.have_order == 1?'本人已下单':'本人未下单'}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import minSwitch from '@/components/min-switch.vue'
	export default {
		components: {
			minSwitch,
		},
		data() {
			return {
				user_list: [],
				res2: [],
				res3: [],
				res4: [],
				openid: '',
				real_name: '',
				real_head_img: '',
				create_time: '',
				resObj: {},
			}
		},
		onLoad: function() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setajax()
				},
			});
		},
		methods: {
			copyText(text) {
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			setajax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.mycommunity&app=1&type=0',
					method: 'POST',
					data: {
						openid: this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						let list=Array.isArray(res.data.user_list)?res.data.user_list:[];
						list.forEach(item=>{
							item.childer=[]
						})
						this.user_list = list;
						this.resObj = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 一级滑块 点开关闭
			switchChange(item, index) {
				if(item.can_sell_child == 0)return;
				uni.showLoading();
				this.$myRequest({
					url:'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.mycommunity&app=1&type=0',
					method:'POST',
					data:{openid:item.openid}
				}).then(res=>{
					uni.hideLoading()
					let list=Array.isArray(res.data.user_list)?res.data.user_list:[];
					if(list.length == 0)return uni.showToast({title:'暂无间推数据！',icon:'none'})
					this.user_list[index].childer = list;
				})
			},
			// 二级滑块 滑块点击
			switchChange1(e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							if (res.data.code == 999) {
								uni.navigateTo({
									url: '/pages/999/999'
								})
							};
							this.res3 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res3 = []
					this.res4 = []
				}
			},
			// 三级滑块点击
			switchChange2(e) {
				if (e.detail.value) {
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/User/myFriend',
						method: 'POST',
						data: {
							user_id: this.user_id,
							select_user_id: e.currentTarget.dataset.id,
							session_id: uni.getStorageSync("sessionid")
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							if (res.data.code == 999) {
								uni.navigateTo({
									url: '/pages/999/999'
								})
							};
							this.res4 = res.data
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.res4 = []
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f5fa;
	}

	.container {
		width: 100%;
		height: 100vh;
		;
		box-sizing: border-box;
	}

	.content {
		padding: 30rpx;
	}

	.num_box {
		padding: 40rpx 30rpx;
		background: url('') center no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		.num_box-left{
			width:40%;
			.num_box-leftitem{
				height: 70rpx;
				text-align: center;
				border-radius: 10rpx;
				border:1px solid #fff;
				background-color: rgba(255,255,255,.3);
				text-align: center;
				line-height: 70rpx;
				font-size: 28rpx;
				color:#fff;
			}
		}
		.num_box-right{
			width: 60%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.num_box-right-text{
			font-size: 28rpx;
			color:#ffffff;
		}
		.num_box-right-num{
			font-size: 50rpx;
			color:#ffffff;
			font-weight: bold;
		}
	}
	
	.jy-yj{
		padding:0 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
		margin-top: 30rpx;
		.jy-yj-title{
			padding:20rpx 0;
			font-size: 32rpx;
			font-weight: bold;
			border-bottom:1px solid #f2f5fa;
		} 
		.jy-yj-list{
			display: flex;
			align-items: center;
			.jy-yj-item{
				width: 50%;
				padding:10rpx 0;
				line-height:30rpx;
				.list-title{
					padding:10rpx 0;
					font-size: 32;
					color:#7f7f80;
				}
				.list-num{
					padding:10rpx 0;
					font-size: 36rpx;
					color:#001b4d;
					font-weight: bold;
				}
			}
			.border-left{
				border-left: 1px solid #f2f5fa;
			}
			.border-top{
				border-top: 1px solid #f2f5fa;
			}
			.padding-left{
				padding-left:40rpx;
			}
		} 
	}
	.sale-group{
		margin-top:30rpx;
		.sale-title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.sale-list-jt{
			background-color: #c6c7de!important;
		}
		.sale-list{
			padding:30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
			margin-bottom: 30rpx;
			.sale-ids-switch-active{
				color:#32539b!important;
			}
			.sale-ids-switch-inactive{
				color:#888!important;
			}
			.sale-ids{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.sale-ids-left{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					.sale-ids-index{
						font-weight: bold;
					}
					.sale-ids-btn{
						padding:0 20rpx;
						border-radius: 6rpx;
						border:1px solid  #7e7e80;
						background-color: #e7ebf5;
						color:#7e7e80;
						margin-left: 20rpx;
					}
					.sale-ids-id{
						color:#7e7e80;
						margin-left: 20rpx;
					}
				}
				.sale-ids-switch{
					display: flex;
					align-items: center;
					font-size: 22rpx;
				}
			}
			.sale-peron{
				display: flex;
				align-items: center;
				padding-top:20rpx;
				.sale-peron-item{
					width: 33.33%;
					font-size: 28rpx;
					color:#7e7e80;
				}
			}
			.sale-yj{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.sale-yj-item{
					width: 33.33%;
					font-size: 28rpx;
					.sale-yj-item-money{
						color:#da433d;
						min-width: 1px;
						min-height: 50rpx;
					}
					.sale-yj-item-text{
						color:#7e7e80;
					}
				}
			}
		}
	}             
</style>
